<template>
    <div class="reports">
        <InfoTop :hdBgUrl="bgImage" infoTopTitle="运营报告" infoTopEnglish="OPERATION REPORT"></InfoTop>
        <div class="reportsContent">
            <div class="tag">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1" @click="activeIndex = '1'">2018</el-menu-item>
                    <el-menu-item index="2" @click="activeIndex = '2'">2017</el-menu-item>
                    <el-menu-item index="3" @click="activeIndex = '3'">2016</el-menu-item>                
                </el-menu>
            </div>
            <ul class="reportList" v-if="activeIndex === '1'">
                <li v-for="item in lists1" :key="item.id"><router-link :to="item.href"><img :src="item.src" alt=""></router-link></li>             
            </ul>
            <ul class="reportList" v-else-if="activeIndex === '2'">
                <li v-for="item in lists2" :key="item.id"><router-link :to="item.href"><img :src="item.src" alt=""></router-link></li>             
            </ul>
            <ul class="reportList" v-else>
                <li v-for="item in lists3" :key="item.id"><router-link :to="item.href"><img :src="item.src" alt=""></router-link></li>             
            </ul>
        </div>
    </div>
</template>

<script>
    import InfoTop from '../include/InfoTop.vue';
    export default{
        data(){
            return{
                bgImage: require('../../../assets/images/databg.png'),
                activeIndex: '1',
                lists1: [
                    {
                        href: '/reports',
                        src: require('../../../assets/images/databg.png')
                    }
                ],
                lists2: [
                    {
                        href: '/reports',
                        src: require('../../../assets/images/newsbg.png')
                    }
                ],
                lists3: [
                    {
                        href: '/reports',
                        src: require('../../../assets/images/aboutUsBg.png')
                    }
                ]
            }
        },
        components: {
            InfoTop
        }
    }
</script>

<style lang="scss" scoped>
    .reports{
        width: 920px;
    }
    .reportsContent{
        width: 920px;
        min-height: 748px;
        margin: 0 0 50px 0;
        background: #ffffff;
    }
    .tag{
        width: 820px;
        margin: 0 auto;
        background: #ffffff;
        position: relative;
        top: -56px;
        box-shadow: 4px 4px 23px rgba($color: #434343, $alpha:0.2);
        ul{
            width: 369px;
            margin: 0 auto;
            border: none;
            li{
                height: 90px;
                line-height: 90px;
            }
        }
    }
    .reportList{
        width: 820px;
        background: #ffffff;
        margin: 0 auto;
        li{
            display: inline-block;
            width: 261px;
            height: 152px;
            margin: 15px 0 0 0;
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(5),
            &:nth-child(6),
            &:nth-child(8),
            &:nth-child(9),
            &:nth-child(11),
            &:nth-child(12),
            &:nth-child(14),
            &:nth-child(15),{
                margin-left: 14px; 
            }
        }
        img{
            width: 100%;
            height: 100%;
        }
    }
</style>

<style lang="scss">
    .reports{
        .el-menu--horizontal .el-menu-item{
            width: 123px;
            font-size: 20px;
            text-align: center;
        }
        .el-menu--horizontal>.el-menu-item.is-active{
            border-bottom: 3px solid #84a8ef;  
        }
    }
</style>
